<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入VUE库 -->
    <script src="../js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true">
                <el-form-item label="商品名，商品批次，商品批次">
                    <el-input v-model="name" placeholder="请输入商品名，商品批次，商品批次"></el-input>
                </el-form-item>
                <el-form-item label="出版日期">
                    <el-date-picker v-model="date1" type="date" placeholder="选择日期">
                    </el-date-picker>
                    至
                    <el-date-picker v-model="date2" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="doQuery(1)">查询</el-button>
                    <el-button type="primary" @click="openEdit({})">新增</el-button>
                </el-form-item>
            </el-form>
        </el-header>


        <el-main>
            <el-table :data="products" style="width: 100%">
                <el-table-column label="编号" width="50" prop="id"></el-table-column>
                <el-table-column label="衣服名" prop="pname"></el-table-column>
                <el-table-column label="市场价" prop="market_price"></el-table-column>
                <el-table-column label="底价" prop="shop_price"></el-table-column>
                <el-table-column label="生产日期" prop="createtime"></el-table-column>
                <el-table-column label="简介" prop="pdesc"></el-table-column>
                <el-table-column label="热销" prop="is_hot"></el-table-column>
                <el-table-column label="图片" prop="image">
                </el-table-column>
                <el-table-column label="商品批次" prop="cid"></el-table-column>


                <el-table-column label="操作">
                    <template slot-scope="product">
                        <el-button size="mini" @click="openEdit(product.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(product.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer style="text-align: right">
            <el-pagination background layout="prev, pager,next"
                           :total="total" :page-size="size" @current-change="doQuery"></el-pagination>
        </el-footer>
    </el-container>

    <el-dialog title="收货地址" width="80%" :visible.sync="ProductFormVisible">
        <el-form>
            <el-form-item label="书名">
                <el-input v-model="editbook.id"></el-input>
            </el-form-item>
            <el-form-item label="编号">
                <el-input v-model="editbook.bookname"></el-input>
            </el-form-item>
            <el-form-item label="出版社">
                <el-input v-model="editbook.bookpress"></el-input>
            </el-form-item>
            <el-form-item label="出版时间">
                <el-input v-model="editbook.pressdate"></el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="editbook.bookauthor"></el-input>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="editbook.bookcount"></el-input>
            </el-form-item>
            <el-form-item label="图片">
                <el-input v-model="editbook.bookimage"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            products: [],
            page: 1,
            size: 10,
            total: 0,
            name: '',
            date1: null,
            date2: null,
            ProductFormVisible: false,
            editbook: {}
        },
        created() {
            this.query();
        },
        methods: {
            query() {
                url = `../queryProduct.s?page=${this.page}&size=${this.size}`;
                url += `&name=${this.name}`;
                if (this.date1) {
                    url += `&date1=${this.fmtDate(this.date1)}`;
                }
                if (this.date2) {
                    url += `&date2=${this.fmtDate(this.date2)}`;
                }
                axios.get(url).then(res => {
                    console.log(res);
                    this.products = res.data.rows;
                    this.total = res.data.total;
                })
            },
            doQuery(page) {
                console.log(event);
                this.page = page;
                this.query();
            },

        }

    })

</script>

</body>
</html>